<template>
  <div>
    <el-form
      ref="searchForm"
      :model="temp"
      label-position=""
      label-width=""
      style="display: flex;"
      :size="searchForm.size"
      inline
    >
      <template v-for="(field, index) in getSearchForm.fields">
        <template v-if="field.show">
          <el-form-item
            v-if="field.type === 'input'"
            :key="index"
            :label="field.labelShow ? field.label : ''"
          >
            <el-input
              v-model.trim="temp[field.name]"
              clearable
              :placeholder="field.label"
              @keyup.enter.native="searching()"
            />
          </el-form-item>
          <el-form-item v-if="field.type === 'select'" :key="index">
            <el-select v-model="temp[field.name]" :placeholder="field.label" @change="searching()">
              <el-option
                v-for="item in field.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="field.type === 'timePicker'" :key="index">
            <span style="margin-right: .5rem;">{{ field.labelShow ? field.label : '' }}</span>
            <el-time-picker
              v-if="field.isRange"
              ref="timeRange"
              v-model="timeRange"
              :range-name="field.name"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              is-range
            />
            <el-time-picker
              v-else
              v-model="temp[field.name]"
              placeholder="选择时间"
            />
          </el-form-item>
          <el-form-item v-if="field.type === 'datePicker'" :key="index">
            <span style="margin-right: .5rem;">{{ field.labelShow ? field.label : '' }}</span>
            <el-date-picker
              v-if="field.isRange"
              ref="dateRange"
              v-model="dateRange"
              :range-name="field.name"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
            <el-date-picker
              v-else
              v-model="temp[field.name]"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <!-- <el-form-item v-if="field.type === 'dateTimePicker'" :key="index">
            <span style="margin-right: .5rem;">{{ field.labelShow ? field.label : '' }}</span>
            <el-date-picker
              v-if="field.isRange"
              ref="dateTimeRange"
              v-model="dateTimeRange"
              :range-name="field.name"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期时间"
              end-placeholder="结束日期时间"
              value-format="yyyy-MM-dd HH:MM:ss"
              :clearable="field.clearable"
            />
            <el-date-picker
              v-else
              v-model="temp[field.name]"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item> -->
        </template>
      </template>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" style="margin-right: 10px;" @click.native.prevent="searching()" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDateFormatYMD }from '@/utils/validate.js'

export default {
  name: 'SearchForm',
  props: {
    searchForm: { type: Object, default: null }
  },
  data() {
    return {
      temp: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '全部',
            onClick(picker) {
              const end = ''
              const start = ''
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '3天内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '一周内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '半年内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '一年内',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateTimeRange: [],
      dateTimeRangeDefault: [],
      timeRange: [],
      timeRangeDefault: [],
      dateRange: [],
      dateRangeDefault: []
    }
  },
  computed: {
    getSearchForm() {
      this.searchForm.fields.forEach((item, index) => {
        if (item.type === 'dateTimePicker' && item.value !== undefined) {
            this.dateTimeRange = this.dateTimeRangeDefault = item.value
            console.log('this.dateTimeRange', this.dateTimeRange)
        }
      })

      return this.searchForm
    }
  },
  watch: {
    // 监听对象temp，
    temp: {
      handler(newVal) {
        this.$emit('searchFormEmit', newVal)
      },
      deep: true
    },
    // dateTimeRange: {
    //   handler(newVal) {
    //     if (newVal === null) {
    //       this.dateTimeRange = newVal = this.dateTimeRangeDefault
    //     }
    //     this.handlerRange(newVal, 'dateTimeRange')
    //   },
    //   deep: true
    // },
    dateRange: {
      handler(newVal) {
        this.handlerRange(newVal, 'dateRange')
      },
      deep: true
    },
    timeRange: {
      handler(newVal) {
        this.handlerRange(newVal, 'timeRange')
      },
      deep: true
    }
  },
  methods: {
    // changeDatetimerange(v){
    //  if(v[0] === '' || v[1] === ''){
    //   this.filters.startDate = ''
    //   this.filters.endDate = ''
    //  }else{
    //   this.filters.startDate = getDateFormatYMD(v[0])
    //   this.filters.endDate = getDateFormatYMD(v[1])
    //  }
    // },
    searching() {
      this.$emit('searchFormEmit', this.temp)
    },
    handlerRange(val, ref) {
      const names = this.$refs[ref][0].$attrs['range-name']
      const res = {}
      names.forEach((value, index) => {
        res[value] = val === null ? '' : val[index]
      })

      this.temp = { ...this.temp, ...res }
    }
  }
}
</script>
